<template>
  <div class="role">
    <page-search
      :searchConfig="searchConfig"
      @startSearch="startSearchHandle"
    ></page-search>
    <page-content
      title="角色"
      ref="pageContentRef"
      pageName="role"
      :tableConfig="tableConfig"
      @newBtnClickEvent="handleNewBtnClick"
      @editBtnEventClick="handleEditBtnClick"
    ></page-content>
    <page-model
      ref="pageModelRef"
      :modelConfig="modelConfig"
      :defalultInfo="pageModelInfo"
      pageName="role"
      :otherInfo="selectKeys"
    >
      <el-tree
        class="menu-tree"
        :data="menuListRef"
        :default-checked-keys="defalultKeysRef"
        show-checkbox
        node-key="id"
        highlight-current
        @check="handleCheckChange"
        :props="{
          children: 'children',
          label: 'name'
        }"
      />
    </page-model>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, watch, ref } from 'vue'

import { searchConfig } from './config/search.config'
import { tableConfig } from './config/content.config'
import { modelConfig } from './config/model.config'

import { usePageContent } from '@/hooks/use-page-content'
import { usePageModel } from '@/hooks/use-page-model'

import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    //1: 从pageContent hook里面导入公共函数
    const [pageContentRef, startSearchHandle] = usePageContent()

    //2:从pagemodel hook导入公共函数

    const [pageModelInfo, pageModelRef, handleEditBtnClick, handleNewBtnClick] =
      usePageModel()

    //3:获取所有菜单列表
    const store = useStore()
    const menuListRef = computed(() => {
      console.log('菜单是', store.state.allMenuList)
      return store.state.allMenuList
    })

    //4:反选的keys
    const defalultKeysRef = ref([])
    watch(pageModelInfo, (newValue: any) => {
      const list = newValue['menuList'] ?? []
      defalultKeysRef.value = list.map((item: any) => {
        return item['id']
      })
      console.log('选中的key', defalultKeysRef.value)
    })

    //5:处理返回结果keys
    const selectKeys = ref({
      menuList: []
    })
    const handleCheckChange = (currentObj: any, list: any) => {
      const { checkedKeys } = list
      selectKeys.value.menuList = checkedKeys
    }

    return {
      searchConfig,
      tableConfig,
      modelConfig,
      pageModelInfo,
      pageContentRef,
      startSearchHandle,
      pageModelRef,
      handleEditBtnClick,
      handleNewBtnClick,
      handleCheckChange,
      menuListRef,
      selectKeys,
      defalultKeysRef
    }
  }
})
</script>

<style scoped lang="less"></style>
